<!DOCTYPE html>
<html lang="zh-CN">

{[template "__head.html"]}

<body>
<div id="app">

    {[template "__navbar.html"]}

    <div class="container-fluid">
        <div class="row">

            {[template "__sidebar.html" .]}

            <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                <h4><b>监控管理</b></h4>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#MonitorRuleCreateModal">创建监控规则</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="">设置邮件通知(TODO)</button>
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="">设置钉钉通知(TODO)</button>
                </div>
                <hr>

                <h4><b>监控标准列表</b></h4>
                <button type="button" class="btn btn-default" @click="RefreshMonitorList()" >刷新数据</button>
                <div class="table-responsive">
                    <table class="table table-hover" style="word-break:break-all; word-wrap:break-all;">
                        <thead>
                        <tr>
                            <th style="width: 20%">主机</th>
                            <th >CPU使用率报警线(0~100|默认:60)</th>
                            <th >内存使用率报警线(0~100|默认:60)</th>
                            <th >磁盘使用率报警线(0~100|默认:60)</th>
                            <th >允许最大网络TX(1*1024kb|默认:100)</th>
                            <th >允许最大网络RX(1*1024kb|默认:100)</th>
                            <th >允许最大网络连接数(默认:100)</th>
                            <th >操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in monitor_list">
                            <td>{{item.Slave}}</td>
                            <td>{{item.MaxCPU}}</td>
                            <td>{{item.MaxMem}}</td>
                            <td>{{item.MaxDisk}}</td>
                            <td>{{item.MaxTx}}</td>
                            <td>{{item.MaxRx}}</td>
                            <td>{{item.MaxConnectNum}}</td>
                            <td>
                                <button type="button" class="btn btn-default btn-sm" @click="UpdateMonitorRule(item)">修改</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

                <hr>
                <h4><b>报警列表</b></h4>
                <button type="button" class="btn btn-default" @click="RefreshAlarmList()" >刷新数据</button>
                <div class="table-responsive">
                    <table class="table table-hover" style="word-break:break-all; word-wrap:break-all;">
                        <thead>
                        <tr>
                            <th >ID</th>
                            <th >主机</th>
                            <th >Lv</th>
                            <th >Date</th>
                            <th >Note</th>
                            <th >操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in alarm_list">
                            <td>{{item.ID}}</td>
                            <td>{{item.Slave}}</td>
                            <td>{{item.Lv}}</td>
                            <td>{{item.Date}}</td>
                            <td>{{item.Note}}</td>
                            <td>
                                <button type="button" class="btn btn-default btn-sm" @click="DeleteAlarm(item)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <nav>
                        <ul class="pager">
                            <li><a type="button" class="btn btn-default" @click="LastPG()">上一页</a></li>
                            <li><a type="button" class="btn btn-default" @click="NextPG()">下一页</a></li>
                        </ul>
                    </nav>
                </div>

            </div>
        </div>

        <!-- 部署容器 弹出层 -->
        <div class="modal fade" id="MonitorRuleCreateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-target=".bs-example-modal-lg">
            <div class="modal-dialog" role="document">
                <div class="modal-content" style="width: 900px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">创建监控规则</h4>
                    </div>
                    <div class="modal-body">
                        <form id="monitor_rule_create">
                        <div class="input-group">
                            <span class="input-group-addon">指定主机</span>
                            <select id="slave" name="slave" class="form-control" style="font-size: 18px;">
                                <option v-for="item in slave_list" :value="item.slave">{{item.online}}</option>
                            </select>
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">CPU使用率报警线(0~100)</span>
                            <input type="text" id="max_cpu" name="max_cpu" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">内存使用率报警线(0~100)</span>
                            <input type="text" id="max_mem" name="max_mem" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">磁盘使用率报警线(0~100)</span>
                            <input type="text" id="max_disk" name="max_disk" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">允许最大网络TX，超过则报警(1*1024kb)</span>
                            <input type="text" id="max_tx" name="max_tx" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">允许最大网络RX，超过则报警(1*1024kb)</span>
                            <input type="text" id="max_rx" name="max_rx" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                        <br>
                        <div class="input-group">
                            <span class="input-group-addon">允许最大网络连接数，超过则报警</span>
                            <input type="text" id="max_connect_num" name="max_connect_num" class="form-control" placeholder="" aria-describedby="basic-addon1">
                        </div>
                        <br>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" @click="MonitorRuleCreate()">提交</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

{[template "__js.html"]}
{[template "__init_js.html"]}

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            url: new Url(),
            pg: 0,
            monitor_list:[],
            slave_list: {},
            alarm_list:[],
        },
        methods: {
            GetList: function () {
                const t = this;
                AjaxRequestText(t.url.MonitorRuleList(), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.monitor_list = jsonObj.body.data;
                    console.log(t.gateway_list);
                });
            },
            GetSlaveList:function (){
                const t = this;
                const data = {};
                AjaxRequestText(t.url.SlaveSelect(), data, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.slave_list = jsonObj.body.data;
                });
            },
            MonitorRuleCreate:function () {
                const t = this;
                var fromData = new FormData($("#monitor_rule_create")[0]);
                console.log(fromData);
                $.ajax({
                    type:'post',
                    async: false,
                    url: t.url.MonitorRuleCreate(),
                    data:fromData,
                    processData:false,
                    contentType:false,
                    success:function(data){
                        console.log(data);
                        $('#MonitorRuleCreateModal').modal('hide');
                        t.GetList();
                    },
                    error:function(){
                        console.log("注册失败");
                    }
                });
            },
            RefreshMonitorList() {
                const t = this;
                t.GetList();
            },
            UpdateMonitorRule(item) {
                const t = this;
                $("#slave").val(item.Slave);
                $("#max_cpu").val(item.MaxCPU);
                $("#max_mem").val(item.MaxMem);
                $("#max_disk").val(item.MaxDisk);
                $("#max_tx").val(item.MaxTx);
                $("#max_rx").val(item.MaxRx);
                $("#max_connect_num").val(item.MaxConnectNum);
                $("#MonitorRuleCreateModal").modal('show');
            },
            GetAlarmList() {
                const t = this;
                AjaxRequestText(t.url.MonitorAlarmList(t.pg), {}, "GET", function(d){
                    //console.log(d);
                    var jsonObj = JSON.parse(d);
                    t.alarm_list = jsonObj.body.data;
                    console.log(t.alarm_list);
                });
            },
            DeleteAlarm(item) {
                const t = this;
                AjaxRequestText(t.url.MonitorAlarmDelete(item.ID), {}, "GET", function(d){
                    console.log(d);
                    t.GetAlarmList();
                });
            },
            RefreshAlarmList() {
                const t = this;
                t.GetAlarmList();
            },
            LastPG() {
                const t = this;
                t.pg = t.pg-1;
                t.GetAlarmList();
            },
            NextPG() {
                const t = this;
                t.pg = t.pg+1;
                t.GetAlarmList();
            },
        },
        created:function(){
            console.log("created");
            this.GetList();
            this.GetSlaveList();
            this.GetAlarmList();
            WSConnectNotice();
        },
        mounted:function(){

        },
    })


</script>

</body>
</html>